<template>
        <div class="main">

            <div class="group">
                <h3>绑定 HTML style:绑定对象</h3>
                <div class="content">
                    <div :style="{fontSize:`${fontSize}px`,color:fontColor}" @click="changeFontColor">沁园春·雪</div>
                </div>
            </div>

            <div class="group">
                <h3>绑定 HTML style： 直接绑定对象</h3>
                <div class="content">
                    <div :style="styleObject">沁园春·雪</div>
                </div>
            </div>

            <div class="group">
                <h3>绑定 HTML style: 绑定数组</h3>
                <div class="content">
                    <div :style="[styleObject, styleObject2]">沁园春·雪</div>
                </div>
            </div>


        </div>
</template>
    
<script setup lang='ts'>
import { reactive, ref } from 'vue';


const fontColor = ref('#abcdef')
const fontSize = ref(16)

const styleObject = reactive({
    color: 'red',
    fontSize:'30px'
})

const styleObject2 = reactive({
    backgroundColor : 'green'
})

const changeFontColor = () => {
    fontColor.value = '#000'

    setTimeout(() => {
        fontSize.value = 24
        
    }, 1000);
}
    
</script>
    
<style lang="scss" scoped>
@import '@/assets/groupDemo.scss';

.active{
    color: burlywood;
}

.text-danger{
    background-color: skyblue;
}

.text-success{
    background-color: pink;
}

.active-new{
    font-size: 22px;
    font-weight: 700;
}
</style>